import React from 'react'
import { Card } from 'antd'

import ReactEcharts from 'echarts-for-react';
import echartTheme from '../themeLight'
// import echarts from 'echarts'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入饼图和折线图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
export default class Bar extends React.Component{
    componentWillMount(){
        echarts.registerTheme('Imock',echartTheme);
    }
    getOption=()=>{
        let option={
          title:{
             text:'用户骑行订单',
             x:'center'
            },
          legend:{
              orient:'vertical',
              right:10,
              top:20,
              bottom:20,
              data:['周一','周二','周三','周四','周五','周六','周日']
          },
          tooltip:{
             trigger:'item',
             formatter:'{a}<br/>{b}:{c}({d}%)'
          },
          series:[
              {
                  name:'订单量',
                  type:'pie',
                  data:[
                      {
                          value:'1000',
                          name:'周一'
                      },
                      {
                        value:'1150',
                        name:'周二'
                    },
                    {
                        value:'1020',
                        name:'周三'
                    },
                    {
                        value:'1100',
                        name:'周四'
                    },
                    {
                        value:'110',
                        name:'周五'
                    },
                    {
                        value:'1070',
                        name:'周六'
                    },
                    {
                        value:'1090',
                        name:'周日'
                    }
                  ]
              }
          ]
        }
        return option;
    }

    getOption2=()=>{
        let option={
          title:{
             text:'用户骑行订单',
             x:'center'
            },
          legend:{
              orient:'vertical',
              right:10,
              top:20,
              bottom:20,
              data:['周一','周二','周三','周四','周五','周六','周日']
          },
          tooltip:{
             trigger:'item',
             formatter:'{a}<br/>{b}:{c}({d}%)'
          },
          series:[
              {
                  name:'订单量',
                  type:'pie',
                  radius:['50%','80%'],
                  data:[
                      {
                          value:'1000',
                          name:'周一'
                      },
                      {
                        value:'1150',
                        name:'周二'
                    },
                    {
                        value:'1020',
                        name:'周三'
                    },
                    {
                        value:'1100',
                        name:'周四'
                    },
                    {
                        value:'110',
                        name:'周五'
                    },
                    {
                        value:'1070',
                        name:'周六'
                    },
                    {
                        value:'1090',
                        name:'周日'
                    }
                  ]
              }
          ]
        }
        return option;
    }
    getOption3=()=>{
        let option={
          title:{
             text:'用户骑行订单',
             x:'center'
            },
          legend:{
              orient:'vertical',
              right:10,
              top:20,
              bottom:20,
              data:['周一','周二','周三','周四','周五','周六','周日']
          },
          tooltip:{
             trigger:'item',
             formatter:'{a}<br/>{b}:{c}({d}%)'
          },
          series:[
              {
                  name:'订单量',
                  type:'pie',
                  data:[
                      {
                          value:'1080',
                          name:'周一'
                      },
                      {
                        value:'1150',
                        name:'周二'
                    },
                    {
                        value:'460',
                        name:'周三'
                    },
                    {
                        value:'1700',
                        name:'周四'
                    },
                    {
                        value:'830',
                        name:'周五'
                    },
                    {
                        value:'1450',
                        name:'周六'
                    },
                    {
                        value:'1090',
                        name:'周日'
                    }
                  ].sort((a,b)=>{
                    return a.value-b.value;
                  }),
                   roseType: 'radius',
                  
                //   加入动画效果
                animationType:'scale',
                animationEasing:'elasticOut',
                animationDelay:function(idx){
                    return Math.random()*200;
                }
              }
          ]
        }
        return option;
    }
    render(){
        return (
            <div>
                <Card title="饼型图表之一">
                    <ReactEcharts option={this.getOption()} theme="Imock"   style={{height:500}} />
                </Card>
                <Card title="饼型图表之二" style={{marginTop:10}}>
                    <ReactEcharts option={this.getOption2()} theme='Imock' style={{height:500}}/>
                </Card>
                <Card title="饼型图表之三" style={{marginTop:10}}>
                    <ReactEcharts option={this.getOption3()} theme='Imock' style={{height:500}}/>
                </Card>
            </div> 
        );
    }
}